<template>
  <div>
    <rz-dialog
      :dialogVisible.sync="show"
      :title="title"
      @oncancel="oncancel"
      :isShowConfirm="false"
      width="90%"
    >
      <el-row :gutter="20">
        <el-col :span="4">
          <el-select size="small" v-model="query.areaCode" placeholder="地区">
            <el-option
              v-for="item in areaOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-cascader
            clearable
            placeholder="请选择标签类别"
            size="small"
            v-model="categoryStr"
            :options="bodyIndustryLabel"
            @change="onCascaderChange"
            :props="{
              checkStrictly: true,
            }"
          ></el-cascader>
        </el-col>
        <el-col :span="4">
          <el-cascader
            :options="statusOptions"
            v-model="bodyindustryStr"
            size="small"
            :props="{ checkStrictly: true }"
            placeholder="请选择单位业态"
            clearable
            @change="onBodyIndustryStr"
          >
          </el-cascader>
        </el-col>
        <el-col :span="6"
          ><el-input
            size="small"
            maxlength="50"
            v-model="query.search"
            placeholder="企业单位名称/统一社会信用代码"
            clearable
          ></el-input
        ></el-col>
        <el-col :span="2"
          ><el-button
            type="primary"
            size="small"
            @click="
              query.pageIndex = 1;
              getList();
            "
          >
            查询
          </el-button></el-col
        >
        <el-col :span="2">
          <el-button size="small" @click="exportSpringFrame"> 导出 </el-button>
        </el-col>
      </el-row>
      <rz-height></rz-height>
      <rz-height></rz-height>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        v-loading="loading"
      >
        <el-table-column prop="districtStreet" label="区域名称" width="130">
        </el-table-column>
        <el-table-column prop="bodyindustry" label="单位业态" width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.bodyindustryremarks">
              {{ scope.row.bodyindustry }}--{{ scope.row.bodyindustryremarks }}
            </div>
            <div v-else>
              {{ scope.row.bodyindustry }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="categoryOne"
          label="单位标签"
          align="center"
          width="180px"
        >
          <template slot-scope="scope">
            <span v-if="!scope.row.categoryOne">--</span>
            <span v-else-if="scope.row.categoryOne == scope.row.categoryTwo">{{
              scope.row.categoryOne
            }}</span>
            <span v-else-if="scope.row.categoryTwo">{{
              scope.row.categoryOne + "--" + scope.row.categoryTwo
            }}</span>
            <span v-else>{{ scope.row.categoryOne }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="identify" label="统一社会信用代码">
        </el-table-column>
        <el-table-column prop="unitname" label="单位名称"> </el-table-column>
        <el-table-column label="许可证编号">
          <template slot-scope="scope">
            <span>
              {{ scope.row.newlicenseno || "--" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="" label="操作" width="80">
          <template slot-scope="scope">
            <el-button size="mini" @click="handelView(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        @pagination="getList"
        :page.sync="query.pageIndex"
      />
    </rz-dialog>

    <!-- <el-dialog
      :visible.sync="singlePersonInfoDialogVisible"
      width="93%"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <single-personInfo
        ref="singlePersonInfoRef"
        :personInfo="singlePersonInfo"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="singlePersonInfoDialogVisible = false">
          关 闭
        </el-button>
      </span>
    </el-dialog> -->

    <!-- 单个单位信息弹窗 -->
    <el-dialog
      :visible.sync="singleUnitInfoDialogVisible"
      width="93%"
      :close-on-click-modal="false"
      :show-close="true"
      :destroy-on-close="true"
    >
      <SingleUnitInfo
      :isButton="false"
        ref="singleUnitInfoRef"
        v-if="singleUnitInfoDialogVisible"
        :unitInfo="singleUnitInfo"
        @closeDialog="
          singleUnitInfoDialogVisible = false;
          query.pageIndex = 1;
          getList();
        "
        @edit="labelDialog = true"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="singleUnitInfoDialogVisible = false">
          关 闭
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { bodyIndustryLabel, bodyIndustryOptions } from "@/utils/configure";
import { groupArea } from "@/api/modules/enterprise";
import {
  findSpringFramesuperviseunit,
  exportSpringFramesuperviseunit,
} from "@/api/modules/coldLink";
// import SinglePersonInfo from "@/views/coldLink/personInfo/singlePersonInfo.vue";
import SingleUnitInfo from "@/views/coldLink/unitInfo/singleUnitInfo.vue";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: () => ({}),
    },
  },
  // props:[],
  // 页面加载
  created() {
    this.categoryStr = [
      this.params.categoryOne,
      this.params.categoryTwo,
    ].filter((x) => x);
    this.bodyindustryStr = [
      this.params.bodyindustry,
      this.params.bodyindustryremarks,
    ].filter((x) => x);
    
    this.show = this.dialogVisible;
    this.query.areaCode = this.params.areaCode;
    this.query.categoryOne = this.params.categoryOne;
    this.query.categoryTwo = this.params.categoryTwo;
    this.query.bodyindustry = this.params.bodyindustry;
    this.query.bodyindustryremarks = this.params.bodyindustryremarks;


    // this.query.startDateCompletion = this.params.startDateCompletion;
    this.query.endDateCompletion = this.params.endDateCompletion;
    this.query.numberOfPeople = this.params.numberOfPeople;
    this.query.testing = this.params.testing;
    // if (this.params.numberOfPeople == 1) {
    //   this.title = "应落实人员信息列表";
    // } else if (this.params.numberOfPeople == 2) {
    //   this.title = "实际落实人员信息列表";
    // } else {
    //   this.title = "未落实人员信息列表";
    // }
    this.query.search = this.params.search;
    this.findAreaListNoParentByParentCode();
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      statusOptions: bodyIndustryOptions, //业态
      singleUnitInfoDialogVisible: false,
      bodyindustryStr: [],
      show: false,
      loading: true,
      query: {
        title: "",
        areaCode: "320500",
        bodyindustry: "",
        bodyindustryremarks: "",
        categoryOne: "",
        categoryTwo: "",
        endDateCompletion: "",
        isPage: 0,
        numberOfPeople: 0,
        pageIndex: 1,
        pageSize: 10,
        search: "",
        startDateCompletion: "",
        // numberOfPeople: "1",
        testing: "1",
      },
      categoryStr: "",
      areaOptions: [],
      bodyIndustryLabel: [
        ...bodyIndustryLabel.list,
        { value: "未设定", label: "未设定" },
      ],
      tableData: [],
      total: 0,
      singlePersonInfo: {},
      singlePersonInfoDialogVisible: false,
      title: "注册单位数",
      singleUnitInfo:{}
    };
  },
  // 方法
  methods: {
    oncancel() {
      //   this.$emit("update:show", false);
      this.$emit("oncancel");
    },
    findAreaListNoParentByParentCode() {
      groupArea({
        params: this.query,
      }).then((res) => {
        this.areaOptions.push({
          label: res.data.areaName,
          value: res.data.areaCode,
        });
        res.data.children.forEach((item1) => {
          this.areaOptions.push({
            label: item1.areaName,
            value: item1.areaCode,
          });
        });
      });
    },
    onCascaderChange(e) {
      if (e.length == 2) {
        this.query.categoryOne = e[0];
        this.query.categoryTwo = e[1];
      } else if (e.length == 1) {
        this.query.categoryOne = e[0];
        this.query.categoryTwo = "";
      } else {
        this.query.categoryOne = "";
        this.query.categoryTwo = "";
        this.categoryStr = "";
      }
    },
    getList() {
        this.loading = true;
      findSpringFramesuperviseunit(this.query).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    exportSpringFrame() {
      exportSpringFramesuperviseunit(this.query).then((res) => {
        var blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download =
          "注册单位数统计" + new Date().getTime() + ".xlsx"; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    //查看
    handelView(row) {
      console.log(row);
      // let routeUrl = this.$router.resolve({
      // path: "/singlePersonInfo",
      // query: {
      //   declareId: val.declareId,
      //   reportUnitName: val.reportUnitName,
      // },
      // });
      // window.open(routeUrl.href, "_blank");

      // this.$router.push({
      //   name: "singlePersonInfo",
      //   params: {
      //     personInfo: row,
      //   },
  this.singleUnitInfo = row;

      this.singleUnitInfoDialogVisible = true;
      this.$nextTick(() => {
        //  仅在整个视图都被重新渲染之后才会运行的代码
        this.$refs.singleUnitInfoRef.getCollectionList();
        this.$refs.singleUnitInfoRef.getPersonList();
      });
    //   this.singlePersonInfo = row;
    //   this.singlePersonInfoDialogVisible = true;

    //   this.$nextTick(function () {
    //     //  仅在整个视图都被重新渲染之后才会运行的代码
    //     this.$refs.singlePersonInfoRef.getCollectionList();
    //   });
    },
    onBodyIndustryStr(e) {
      if (e.length == 2) {
        this.query.bodyindustry = e[0];
        this.query.bodyindustryremarks = e[1];
      } else if (e.length == 1) {
        this.query.bodyindustry = e[0];
        this.query.bodyindustryremarks = "";
      } else {
        this.query.bodyindustry = "";
        this.query.bodyindustryremarks = "";
        this.bodyindustryStr = "";
      }
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    // "single-personInfo": SinglePersonInfo,
    SingleUnitInfo,
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.red {
  color: red;
}
.green {
  color: green;
}
</style>